<template>
  <div>
    <el-table :data="tableData.data" border style="width: 100%">
      <el-table-column fixed prop="title" label="文章标题" width="300">
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="300">
      </el-table-column>
      <el-table-column prop="stemfrom" label="文章来源" width="300">
      </el-table-column>
      <el-table-column prop="read" label="阅读量" sortable width="120">
      </el-table-column>
      <el-table-column prop="star" label="点赞数" sortable width="120">
      </el-table-column>
      <el-table-column prop="comment" label="评论数" sortable width="120">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button @click="editArticle(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button @click="delArticle(scope.row)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="getCurrentPage($event)"
      layout="prev, pager, next"
      :total="totalNums.total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { http } from "../../utils/http";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const router = useRouter()
const store = useStore();
const params = reactive({
  author: store.state.msg.username,
  page: 1,
});
let totalNums = reactive({ total: 0 });
let tableData = reactive({ data: [] });
const getCurrentPage = async (page) => {
  params.page = page;
  const result = await http.get(
    `/article/findAll?author=${params.author}&page=${params.page}`
  );
  tableData.data = result.data;
};

// 编辑和删除
const delArticle = async (data) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      http
        .post(`/article/delete`, { id: data.id })
        .then((res) => {
          tableData.data = tableData.data.filter((item) => item.id !== data.id);
          totalNums.total--;
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((err) => {
          ElMessage({
            type: "error",
            message: "删除失败!",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const editArticle = (data) => {
  router.push({
    path: '/admin/article/update',
    query: {id:data.id}
  })
};

onMounted(async () => {
  const result = await http.get(
    `/article/findAll?author=${params.author}&page=${params.page}`
  );
  totalNums.total = result.total;
  tableData.data = result.data;
});
console.log();
</script>

<style lang="scss" scoped>
.el-table {
  height: 650px;
}
</style>